<template>
	<div class="water">
		<!-- 树形结构 -->
		<div class="water-tree">
			<span>组织树</span>
			<el-tree
				:data="treeInfo"
				default-expand-all
				ref="orgTree"
				:expand-on-click-node="false"
				node-key="value"
				:props="defaultProps"
				@node-click="treeNodeClick"
			></el-tree>
		</div>
		<!-- 内容展示 -->
		<div class="water-show">
			<!-- 工具栏 -->
			<Toolbar>
				<template #left>
					<div class="left-item">
						<span>水源位置：</span>
						<el-input
							placeholder="请输入"
							v-model="searchInfo.location"
							size="small"
						></el-input>
					</div>
					<div class="left-item">
						<span style="width: 160px; display: inline-block">监测设备IMEI号：</span>
						<el-input v-model="searchInfo.imei" placeholder="请输入" size="small"></el-input>
					</div>
				</template>
				<template #right>
					<div class="right-item">
						<el-button size="small" type="info" plain @click="remake">重置</el-button>
						<el-button size="small" type="info" plain @click="queryTable">查询</el-button>
						<el-button size="small" type="info" @click="add">新增水源</el-button>
					</div>
				</template>
			</Toolbar>

			<div class="water-show__card">
				<!-- 表格展示 -->
				<div class="table mt15">
					<el-table :data="tableData" border style="width: 100%">
						<el-table-column type="index" align="center"></el-table-column>
						<el-table-column align="center" prop="location" label="水源位置">
							<template #default="{ row }">
								<el-popover
									placement="top-start"
									width="200"
									trigger="hover"
									:content="row.location"
								>
									<span style="width: 100%; display: block" class="OPoint" slot="reference">
										{{ row.location }}
									</span>
								</el-popover>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="imei" label="设备IMEI号">
							<template #default="{ row }">
								<span>{{ row.imei || '--' }}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="prop" label="水位（米）">
							<template #default="{ row }">
								<span>{{ row.data || '--' }}</span>
							</template>
						</el-table-column>
						<el-table-column align="center" label="操作" width="160">
							<template #default="{ row }">
								<el-button class="edit" type="text" size="mini" @click="edit(row)">
									编辑
								</el-button>
								<el-button class="delete" type="text" size="mini" @click="deleteRow(row)">
									删除
								</el-button>
							</template>
						</el-table-column>
					</el-table>

					<!-- 翻页 -->
					<div class="mt15">
						<el-pagination
							@size-change="handleSizeChange"
							@current-change="handleCurrentChange"
							:current-page="searchInfo.pageNum"
							:page-size="searchInfo.pageSize"
							:page-sizes="[10, 20, 50]"
							:total="totalPage"
							background
							layout="sizes, prev, pager, next, jumper"
						></el-pagination>
					</div>
				</div>
			</div>
		</div>

		<!-- 地图弹窗 -->
		<el-dialog append-to-body :visible.sync="showdialog_map" width="80%">
			<div style="height: 500px">
				<XyMap @change="changePoint" :lnglat="lnglat" />
			</div>
		</el-dialog>
	</div>
</template>
 
<script>
import { getOrgTreeApi, getHydrantInfoApi, addCommonApi, deleteCommonApi } from '@/utils/api';
import XyMap from '@/components/xy-map.vue';
import { turnPage } from '@/mixins/turnPage';

export default {
	mixins: [turnPage],
	name: 'Water',
	components: {
		XyMap
	},
	data() {
		return {
			showdialog_map: false,
			treeInfo: [] /* 树 */,
			defaultProps: {
				children: 'children',
				label: 'name'
			} /* 树形节点名 */,
			orgId: '',
			tableData: [] /* 表格数据 */,
			totalPage: 1 /* 表格总数 */,
			subForm: {
				orgId: '',
				location: '',
				longitude: '',
				latitude: '',
				equipmentType: 1
			},
			searchInfo: {
				pageNum: 1,
				pageSize: 10,
				orgId: '',
				location: '',
				imei: '',
				equipmentType: 1
			} /* 检索信息 */,
			lnglat: []
		};
	},
	created() {
		this.init();
	},
	methods: {
		// 初始化
		async init() {
			await this.getOrgTree();
		},

		// 获取组织树
		async getOrgTree() {
			const res = await getOrgTreeApi();

			if (res.success) {
				this.treeInfo = res.data;

				this.$nextTick(() => {
					setTimeout(() => {
						this.treeInfo && this.$refs['orgTree'].setCurrentKey(this.treeInfo[0].value);
						this.orgId = this.treeInfo[0].value;
						this.queryTable();
					});
				});
			} else {
				this.$toast(res.msg);
			}
		},

		// 查询水源信息
		async queryTable() {
			this.searchInfo.orgId = this.orgId;
			const res = await getHydrantInfoApi(this.searchInfo);

			if (res.success) {
				this.totalPage = res.data.total;
				this.tableData = res.data.list;
			} else {
				this.$toast(res.msg);
			}
		},

		// 重置
		remake() {
			this.searchInfo = {
				orgId: this.orgId,
				pageNum: 1,
				pageSize: 10,
				location: '',
				equipmentType: 1
			};

			this.queryTable();
		},

		// 树形结构的点击
		treeNodeClick(row) {
			this.orgId = row.value;
			this.queryTable();
		},

		// 新增水源
		add() {
			this.subForm = {
				orgId: '',
				location: '',
				longitude: '',
				latitude: '',
				equipmentType: 1
			};

			this.lnglat = [];
			this.showdialog_map = true;
		},

		// 地图点位改变
		changePoint(mapInfo) {
			this.showdialog_map = false;
			this.subForm.orgId = this.orgId;
			this.subForm.longitude = mapInfo.lng;
			this.subForm.latitude = mapInfo.lat;
			this.subForm.location = mapInfo.address;
			this.addHydrant();
		},

		async addHydrant() {
			const res = await addCommonApi(this.subForm);

			if (res.success) {
				this.$message.success('操作成功');
				this.queryTable();
			} else {
				this.$toast(res.msg);
			}
		},

		// 编辑
		edit(row) {
			this.subForm.id = row.id;
			this.subForm.location = row.location;
			this.subForm.longitude = row.longitude;
			this.subForm.latitude = row.latitude;
			this.subForm.orgId = row.orgId;
			this.subForm.imei = row.imei;
			this.subForm.equipmentType = row.equipmentType;
			setTimeout(() => {
				this.lnglat = [row.longitude, row.latitude];
			}, 200);
			this.showdialog_map = true;
		},

		// 删除
		async deleteRow(row) {
			const res = await deleteCommonApi({ id: row.id });

			if (res.success) {
				this.$message.success('已删除');
				this.queryTable();
			} else {
				this.$toast(res.msg);
			}
		}
	}
};
</script>
 
<style lang="scss">
.water {
	padding: 20px;
	font-size: 14px;
	display: flex;
	height: calc(100vh - 40px);

	.water-tree {
		min-width: 300px;
		border-radius: 3px;
		overflow: hidden;
		border: 1px solid #eee;
		box-shadow: $--xy-shadow-deep;

		& > span {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 15px 0;
			background-color: rgb(0, 166, 217);
			color: #fff;
		}
	}

	.water-show {
		flex: 1;
		margin-left: 20px;
		border-radius: 3px;
		overflow: hidden;

		&__card {
			margin-top: 20px;
			padding: 0 15px;
		}
	}

	.toolbar-wrapper {
		height: 50px;
		box-sizing: border-box;
	}

	.left-item {
		padding-left: 15px;
		display: flex;
		align-items: center;

		& > span {
			display: inline-block;
			width: 120px;
			font-size: 13px;
			color: #666;
			margin-right: 5px;
		}

		.el-select {
			margin-right: 20px;
		}
	}

	.right-item {
		padding-right: 15px;
	}

	.el-tree {
		padding: 10px;
	}

	.el-form-item {
		width: 46%;

		input {
			width: 280px;
		}
	}

	.el-button.edit {
		color: rgb(2, 168, 223);

		&:hover {
			color: rgb(51, 204, 254);
		}

		&:active {
			color: rgb(2, 168, 223);
		}
	}

	.el-button.delete {
		color: rgb(217, 0, 51);

		&:hover {
			color: rgb(255, 49, 97);
		}

		&:active {
			color: rgb(217, 0, 51);
		}
	}

	.el-tree-node.is-current > .el-tree-node__content {
		border: 1px solid #e2e2e2 !important;
		background-color: #f3f3f3;
		border-radius: 2px;
		box-shadow: 2px 3px 5px rgba(170, 170, 170, 0.3);
	}
}
</style>